<template>
    <div class="list-component">
        <el-form class="search-bar" :inline="true" :model="filter" ref="filter">
            <el-form-item label="场所名称" prop="placeName">
                <el-input v-model="filter.placeName" placeholder="请输入场所名称"></el-input>
            </el-form-item>
        	<el-form-item label="场所类型" prop="placeType">
        	    <el-select v-model="filter.placeType" placeholder="请选择" clearable @change="onChange">
        			<el-option v-for="item in placeTypeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        		  </el-select>
        	</el-form-item>
             <el-form-item class="filter-button">
                <el-button type="primary" size="small" @click="getListData(1)">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="list">
            <div class="data">
                <el-table :data="listData.data" ref="listData" stripe v-height="'auto'" >
                    <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                        <div slot-scope="scope">
                            {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                        </div>
                    </el-table-column>
                    <el-table-column label="场所名称" prop="placeName" align="center" width=""></el-table-column>
					<el-table-column label="场所类型" prop="placeType" align="center" width=""></el-table-column>
					<el-table-column label="巡查人" prop="checkUser"  align="center" width=""></el-table-column>
                    <el-table-column label="巡查日期" prop="checkDateStr"  align="center" width=""></el-table-column>
					<el-table-column label="状态" prop="statusName"  align="center" width=""></el-table-column>
                    <el-table-column label="操作" align="center" width="">
                        <slot slot-scope="scope">
                            <el-button size="mini" @click="viewDetail(scope)">查看</el-button>
                        </slot>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination layout="prev, pager, next"
                :current-page="listData.pageNum"
                :page-size="listData.pageSize"
                :total="listData.total"
                @current-change="getListData"
                @prev-click="getListData"
                @next-click="getListData"
            ></el-pagination>
        </div>
        <el-dialog title="详情" :visible.sync="showDialog">
			<detail :id="initData" :approveStateList="approveStateList" @refresh="getListData"></detail>
		</el-dialog>
    </div>
</template>
<script>
	import detail from "./patrol-detail.vue"
export default {
	components:{detail},
    data(){
        return{
			filter: {
			    placeName:'',
			    placeType: '',
			},
            listData:{
                pageNum:1,//页码
                pageSize:20,
                total:5,//总共条数
                data:[]
            },
            showDialog:false,
            placeTypeList:[],
			initData:"",
			approveStateList:[]
            
        }
    },
	
    methods:{
        getListData(pageNum){
            var submitData={
                current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
                size:this.listData.pageSize,
                ...this.filter,
            };

            this.$http.fixedPlacePatrolList(submitData)
            .then((res)=>{
                var data=res.data.data;
                this.$set(this.listData,'pageNum',data.current);
                this.$set(this.listData,'pageSize',data.size);
                this.$set(this.listData,'total',data.total);
				this.$set(this.listData,'data',this.transData(data.records))

            }).catch((err)=>{
                throw(err)
            })
        },


        viewDetail(rowData){
            this.showDialog=true;
			this.$nextTick(()=>{
				this.initData=rowData.row.id
			})
        },

        closeDialog(){
            this.showDialog=false
        },
		
		//场所类型
		getPlaceTypeList(){
			this.$http.getDictKeyList({parentCode:'fixedPlace'})
			.then((res)=>{
				this.placeTypeList=res.data.data ||[]
			}).catch((err)=>{
				throw(err)
			})
		},
		
		//审批状态
		getApprovStatus(){
			this.$http.getDictKeyList({parentCode:'patrolStatus'})
			.then((res)=>{
				this.approveStateList=res.data.data ||[]
				this.getListData()
			}).catch((err)=>{
				throw(err)
			})
		},
		
		transData(data){
			data.forEach((item)=>{
				this.approveStateList.forEach((item1)=>{
					if(item.status==item1.code){
						item.statusName=item1.name
					}
				})
			})
			return data;
		},
		
		onChange(vv){
			if(!vv){
				this.getListData(1)
			}
		}
		
		

        
    },
    created(){
		this.getPlaceTypeList()
		this.getApprovStatus()
    },
   

}
</script>

<style scoped lang="scss">

</style>


